import {defaultStyle} from "@/svgutil/default-style";
import * as Dt from '@/svgutil/draw-type';
import {findObjectValue, findText} from "@/svgutil/comm-method";

export const defineData = function (values) {
    testLimit();
    return  {
        translate: [0.5, 0.5],
        style: {...defaultStyle},
        children: [
            testLimit(),
            testRect(),
            testTriangle(),
            testCircle(),
            testEllipse(),
            ...testLine(),
            testPolygon(),
            testText(),
            ...testArc(),
            textPath(),
            testTable(values),
        ]
    }
}

function testTable(values) {
    let col = [
        {
            label: '标题1',
            children: [
                {
                    label: '列1',
                    prop: 'col1',
                },
                {
                    label: '列2',
                    prop: 'col2',
                },
                {
                    label: '列3',
                    prop: 'col3',
                }
            ]
        },
        {
            label: '列4',
            prop: 'col4',
        }
    ];
    let data = [
        {col1: '{P001}[v]',col2: '{P002}[v]',col3: 3, col4: 4,col5: 'KG'},
        {col1: 11,col2: 12,col3: 13, col4: 14,col5: 15},
    ];
    let table = Dt.table(100, 600, 300, 100).setHeaderHeight(40);
    table.setMovableY(false);
    table.setZoomAbleY(false);
    table.setColumn(col)
        .setData(data);
    table.cellStyle = (cell,colIndex,row,rowIndex) => {
        let tagValue = findObjectValue(row[cell.prop], values);
        let rowSpan = 1;
        if(rowIndex===0){
            if(cell.prop === 'col1'){
                rowSpan = 2;
            }else if(cell.prop ==='col2'){
                rowSpan = 0;
            }
        }
        let colSpan = 1;
        if(cell.prop === 'col3'){
            if(rowIndex === 0){
                colSpan = 2;
            }else if(rowIndex === 1){
                colSpan = 0;
            }
        }
        let style = {
            rowSpan: rowSpan,
            colSpan: colSpan,
        }
        if(tagValue && typeof tagValue === 'object' && tagValue.w === 1){
            style.tableStyle = {fill: 'red'};
            style.fontStyle = {fill: '#fff'};
        }
        return style;
    }
    table.cellClick = ({event,drawParam}) => {
        console.log(event,drawParam);
        window.alert('点击了单元格：' + JSON.stringify(drawParam.cell));
    }
    return table;
}
function textPath() {
    let path1 = Dt.path()
        .moveto(300,400)
        .linetoRx(100)
        .linetoRy(100)
        .linetoRxy(50,50)
        .lineto(400,100)
        .closepath();

    return path1;
}

function testArc() {
    let arcs = [];
    let arc1 = Dt.arc(100,380,50)
        .setStyle({stroke: 'none'})
        .setArc(0,1.57,2)
        .setText('弧1')
        .setStart([100,400]);
    arc1.onClick = () => {window.alert('点击了圆弧1！');};

    let arc2 = Dt.arc(90,370,50).setStyle({fill: 'none'});
    arc2.setAngle(180,300,2)
        .setStart([10,330])
        .setText('圆弧2');

    let arc3 = Dt.arc(100,370,50).setAngle(300,360,1);
    arc3.onClick = () => {window.alert('点击了圆弧3！');};

    let arc4 = Dt.arc(250,370,50).setStyle({fill: 'none'});
    arc4.setAngle(0,300,1).setText('圆弧4');
    arc4.onClick = () => {window.alert('点击了圆弧4！');};
    arc4.checkFontStyle = ({values}) => {
        let warning = findObjectValue('P001',values).w;
        if(warning === 1){
            return {fontWeight: 'bold',fill: '#f00'};
        }
    };

    arcs.push(arc1,arc2,arc3,arc4);
    return arcs;
}
function testText(){
    let text = Dt.text(0, 0, '文字缩放，不能使用translate定位',{fill: 'red'});
    text.setTranslate(200, 450);

    let textList = [];
    textList.push(Dt.text(0, 60, '或者坐标计算中考虑translate手动增加平移').clearParentStyle(true));
    text.addText(Dt.text(0, 30, '{P001}[v]'))
        .addTextList(textList);
    return text;
}
function testPolygon() {
    let polyline = Dt.polyline('100,210 10,300 200,300');
    polyline.setText('折线');
    return polyline;
}
function testLine() {
    let lines = [];
    let line1 = Dt.line(100,0, 100,200);
    line1.setText('直线').setStyle({strokeWidth: 3});
    let line2 = Dt.line(50,50,300,50);
    line2.onClick = () => {
        window.alert('点击了横线！');
    }

    lines.push(line1,line2);
    return lines;
}

function testEllipse() {
    let ellipse = Dt.ellipse(300,50,30,40);
    ellipse.setText('椭圆形').onClick = () => {window.alert('点击了椭圆!');};
    ellipse.warningLabel = '{P001}[w]';
    ellipse.checkStyle = ({drawParam,values}) => {
        let warningValue = findText(drawParam.warningLabel,values);
        if(warningValue === '1'){
            return {fill: '#f00'};
        }
    }
    return ellipse;
}
function testCircle() {
    let circle = Dt.circle(200,50,40);
    circle.setStyle({fill: 'none',stroke: 'red'})
        .setText('圆形',{fill: 'blue'})
        .onMouseover = () => {console.log('进入圆形');};
    return circle;
}

function testTriangle(){
    //let triangle = Dt.triangle().isoscelesTriangle(100,0,100,100);
    //triangle.setText('三角形').setStyle({fill: 'blue',stroke: ''}).setMovable(false).setZoomAble(false);
    let triangle = Dt.triangle(100,10,10,100,200,100);
    triangle.setText('三角形').onClick = ()=>{window.alert('点击了'+triangle.type);};
    return triangle;
}
function testLimit(){
    let limit = Dt.limit(0,0,500,800).setLimit(100,100,400,600);
    limit.setStyle({fill: 'none'});
    return limit;
}

function testRect() {
    let x = 200;
    let y = 200;
    let w = 100;
    let h = 100;
    let rect = Dt.rect(x,y,w,h).setStyle({fill: '#f00',strokeWidth: 1});
    rect.setText('{P001}[v]');
    //rect.setZoomAble(false);
    rect.onClick = ({event}) => {
       console.log('点击了鼠标：' +  event.button);
    };
    rect.onMouseover = () => {
        console.log('鼠标进入图形！');
    }
    rect.onMousemove = () => {
        console.log('鼠标在图形上移动！');
    }
    rect.onMouseout = () => {
        console.log('鼠标移出图形！');
    }
    return rect;
}